<style>
body {
  margin: 0;
}

table {
  background: red;
  border-collapse: collapse;
}

td, th {
  height: 50px;
  width: 50px;
  padding: 0;
}

th {
  background: green;
}

.scroller {
  will-change: transform;

  overflow: auto;
  width: 100px;
  height: 200px;
  outline: 2px solid black;
}

.sticky {
  will-change: transform;

  position: sticky;
  top: 25px;
}
</style>

<script>
if (window.testRunner)
  testRunner.waitUntilDone();

function finishTest() {
  document.querySelector('.scroller').scrollTop = 200;
  if (window.testRunner)
    testRunner.notifyDone();
}

window.addEventListener('load', function() {
  requestAnimationFrame(function() {
    requestAnimationFrame(finishTest);
  });
});
</script>


<div class="scroller">
  <table>
    <thead class="sticky">
      <tr class="sticky">
        <th class="sticky"></th>
      </tr>
    </thead>
    <tbody>
      <tr><td></td></tr>
      <tr><td></td></tr>
      <tr><td></td></tr>
      <tr><td></td></tr>
      <tr><td></td></tr>
      <tr><td></td></tr>
      <tr><td></td></tr>
      <tr><td></td></tr>
      <tr><td></td></tr>
    </tbody>
  </table>
</div>
